<%@ include file="/WEB-INF/views/taglib.jsp" %>
 <c:url value="/attendance/search" var="paginationUrl"></c:url>
 <div>
 <h3 class="left">Attendance Search</h3>
 <a onclick="$('.searchCriteria').toggle();" class="button right">
	 <img align="absmiddle" src="${imageUrl}/icon_detail.png"> Toggle Search Criteria
</a>
</div>
<div class="clear"></div>
 <form:form id="form" method="get" modelAttribute="searchCriteria" cssClass="simpleForm">
 <jsp:include page="/WEB-INF/views/message.jsp"></jsp:include>
 <div class="searchCriteria">
 <fieldset>
 	<legend>Search Criteria</legend>
	<p>
	<label>
	Person Name  
	</label> 
	<form:input path="search['systemUser.personName']"/>
	</p>
	<p>
	<label>
	Person Type  
	</label> 
	<form:select path="search['systemUser.userType']">
		<form:option value="">ALL</form:option>
		<form:options items="${globalUserTypeMap}" />	
	</form:select>
	</p>
	<p>
	<label>
	Start Date
	</label> 
	<form:input path="search['timeInStart']" id="timeInStart" /> <input id="startBtn" type="button" class="calendarBtn" />
	</p>
	<p>
	<label>
	End Date
	</label>
	<form:input path="search['timeInEnd']"  id="timeInEnd"/> <input id="endBtn"  type="button" class="calendarBtn" />
	</p>
</fieldset>
	<span class="right">
	  	<button type="submit" class="button">Search</button>
	 </span>
 </div>
 </form:form>	
 <div class="clear"></div>
 <fieldset>
 	<legend>Search Result</legend>
 	<c:choose>
 		<c:when test="${searchResult.resultCount==0}">
 		<div class="notice">
 		<span class="ui-icon ui-icon-info left marginright5"></span>
 		No records </div>
 		</c:when>
 	<c:otherwise>
 <table class="gridSearch">
 <col width="5%">
 <col width="30%">
 <col width="20%">
 <col width="20%"> 
 <col width="10%">
 <col width="10%">
 <thead>	
 	<tr>
 		<th>S/N</th>
 		<th>
 		<aims:sort columnName="systemUser.personName" label="Person Name"></aims:sort>
 		</th> 
 		<th>
 		<aims:sort columnName="systemUser.userType" label="Person Type"></aims:sort>
 		</th>
 		<th>
 		<aims:sort columnName="timeIn" label="Date"></aims:sort>
 		</th>
 		<th>
 		<aims:sort columnName="timeIn" label="Time In"></aims:sort>
 		</th>
 		<th>
 		<aims:sort columnName="timeIn" label="Time Out"></aims:sort>
 		</th>
 	</tr>
 </thead>
 <tbody>
 	
 	<c:forEach items="${searchResult.result}" var="result" varStatus="status">
 	<tr <c:if test="${(status.count%2)==0 }">class="alt"</c:if>>
 		<td class="seqNo">${searchResult.recordNo+status.index}</td>
 		<td>${result.systemUser.personName}</td>
 		<td>
 			<c:choose>
 				<c:when test="${result.systemUser.userType eq 'SG' }">
 					Security Guard
 				</c:when>
 				<c:when test="${result.systemUser.userType eq 'VIS' }">
 					Visitor
 				</c:when>
 				<c:when test="${result.systemUser.userType eq 'SYUS' }">
 					System User
 				</c:when>
 			</c:choose>
 		</td>
 		<td>
 		<fmt:formatDate value="${result.timeIn}" pattern="${globalDateFormatJava}"/>
 		 
 		</td>
 		<td>
 		<fmt:formatDate value="${result.timeIn}" pattern="HH:mm"/>
 		</td>
 		<td>
 		<fmt:formatDate value="${result.timeOut}" pattern="HH:mm"/>
 		</td>
 		</tr>
 	</c:forEach>
 	
 </tbody>
 <tfoot>
 	<tr><td colspan="10" align="right">
 		<jsp:include page="/WEB-INF/views/pagination.jsp">
 			<jsp:param name="paginationUrl" value="${paginationUrl}" />
 		</jsp:include>
 	</td></tr>
 </tfoot>
 
 </table>
 </c:otherwise>
 </c:choose>
  </fieldset>
  
  
<script type="text/javascript">
		$(document).ready(function() {
			cal = Calendar.setup({
		          onSelect: function(cal) { cal.hide() },
		          showTime: false
		    });
			
			cal.manageFields("startBtn", "timeInStart", globalJsCalDateFormat);
			cal.manageFields("endBtn", "timeInEnd", globalJsCalDateFormat);
			
			$('.searchCriteria').hide();
		});
</script>